본문으로 건너뛰기

useReducer

useReducer 소개​

리액트(React)에서 상태를 관리하는 가장 일반적인 방법은 useState 훅을 사용하는 것입니다. 하지만 상태 관리가 복잡해지면 useState로는 한계가 있을 수 있습니다. 이때 useReducer 훅을 사용하면 효율적으로 상태를 관리할 수 있습니다. useReducer는 Redux와 같은 상태 관리 라이브러리에서 사용하는 리듀서 패턴을 적용하여 상태를 업데이트합니다.

useReducer 기본 사용법​

useReducer는 세 가지 인자를 받습니다:

  1. 리듀서 함수: 현재 상태와 액션을 받아서 새로운 상태를 반환하는 함수
  2. 초기 상태: 상태의 초기값
  3. 초기화 함수 (선택적): 초기 상태를 만드는 함수

리듀서 함수 예시​

리듀서 함수는 두 가지 인자를 받습니다:

  • state: 현재 상태
  • action: 상태를 변경하는 데 필요한 정보를 담고 있는 객체
const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return { count: 0 };
    default:
      throw new Error('Unknown action type');
  }
}

useReducer 훅 사용 예시​

아래는 useReducer를 사용하여 카운터를 구현하는 예제입니다.

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return { count: 0 };
    default:
      throw new Error('Unknown action type');
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </div>
  );
}

export default Counter;

useReducer의 장점​

  1. 복잡한 상태 관리: 여러 상태값을 갖는 복잡한 로직을 단순화할 수 있습니다.
  2. 액션 중심의 상태 업데이트: 상태 변경이 액션을 통해 명확하게 이루어지므로 코드의 가독성이 높아집니다.
  3. 테스트 용이: 리듀서 함수는 순수 함수이므로 독립적으로 테스트하기가 쉽습니다.

주의해야 할 점​

  • 초기 상태 설정: 초기 상태는 단순한 값이나 객체일 수 있습니다. 하지만 만약 초기 상태를 계산해야 한다면 초기화 함수를 세 번째 인자로 전달할 수 있습니다.
  • 복잡한 액션 처리: 액션의 타입과 페이로드(payload)를 잘 정의하여야 합니다. 액션 타입은 문자열로 정의하고, 필요한 데이터를 액션 객체의 속성으로 포함시킵니다.
  • 불변성 유지: 리듀서 함수는 불변성을 유지해야 하므로, 기존 상태를 직접 변경하지 않고 새로운 상태 객체를 반환해야 합니다.

더 알아보기​

  • Redux: 리액트 애플리케이션에서 더 복잡한 상태 관리를 위해 useReducer 대신 Redux를 사용할 수 있습니다. Redux 공식 문서
  • 컨텍스트 API와 함께 사용: useReducer와 컨텍스트 API를 결합하면 전역 상태 관리가 가능합니다. React Context
  • 리듀서 패턴: 상태 관리 패턴에 대한 자세한 설명은 리듀서 패턴 문서를 참고하세요.

내용 요약​

useReducer 훅은 복잡한 상태 관리 로직을 단순화하고, 상태 변경을 명확하게 할 수 있는 강력한 도구입니다. 리듀서 함수와 액션을 통해 상태를 관리하며, 초기 상태와 액션 타입을 잘 정의하여야 합니다. 이를 통해 상태 관리의 가독성을 높이고 유지보수를 쉽게 할 수 있습니다.